<template>
  <div class="page_box">
    <div class="title">{{ title }}</div>
    <div class="content">
      <el-select
        v-model="currentLang"
        placeholder="请选择"
        @change="langChange"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="currentLang === item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="tips">
      点击下面按钮 可出现确认框 显示 element 组件的语言情况
    </div>
    <div class="lang" @click="clickText">{{ $t("name") }}</div>
  </div>
</template>

<script>
export default {
  name: "i18nPage",
  data() {
    return {
      currentLang: "",
      // 语言包 选择
      options: [
        {
          label: "中文",
          value: "zh", // 这里的值要和 配置的 src/language/index.js 中配置的一样
        },
        {
          label: "英文",
          value: "en",
        },
      ],
    };
  },
  created() {
    // 默认从 i18n 拉取默认的 语言配置项
    this.currentLang = this.$i18n.locale;
  },
  methods: {
    // 切换语言
    langChange() {
      this.$i18n.locale = this.currentLang;

      // 可做本地化操作
    },
    // 点击文字 显示 elementui 国际化
    clickText() {
      this.$confirm()
        .then(() => {})
        .catch(() => {});
    },
  },
  computed: {
    title() {
      return this.$route.query.title || "未设置";
    },
  },
};
</script>

<style scoped lang="scss">
.page_box {
  .title {
    font-size: 24px;
  }
  .content {
    padding: 20px;
  }
  .tips {
    font-size: 12px;
    color: red;
  }
  .lang {
    margin: 0 auto;
    width: 130px;
    height: 60px;
    line-height: 60px;
    font-size: 20px;
    border: 1px solid #ededed;
    border-radius: 10px;
    cursor: pointer;
    &:hover {
      background-color: skyblue;
    }
  }
}
</style>
